<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>06-弹窗组件练习</title>
	<script src="../vue@3.2.23.js"></script>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
			box-sizing: border-box;
		}
		.pop_box{
			position: absolute;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			
			.content_box{
				position: relative;
				width: 30%;
				height: 30%;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
				padding: 10px 0px 25px 0px;
				
				.close_box{
					padding: 5px;
					margin-right: 15px;
					border-radius: 5px;
					background-color: aqua;
					user-select: none;
					transition: .1s;
				}
				.close_box:hover{
					color: white;
					background-color: red;
				}
				
				.tip_info{
					padding: 0px 30px;
					width: 100%;
					background-color: antiquewhite;
				}
				
				.but_box{
					margin-right: 15px;
				}
			}
		}
		
		button{
			font-size: 18px;
			padding: 4px 16px;
			border-radius: 5px;
			border: none;
			color: #ffffff;
		}
		/* button:not(:first-child){
			margin-left: 0px;
		} */
		button:nth-child(n+2){
			margin-left: 20px;
		}
		.but_ok{
			background-color: darkgreen;
		}
		.but_warn{
			background-color: yellowgreen;
		}
		.but_not{
			background-color: darkgreen;
		}
	</style>
</head>
<body>
	<div id="app">
		<table border="1px" style="text-align: center;">
			<tr>
				<th>序号</th>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总价</th>
				<th>操作</th>
			</tr>
			<tr v-for="(val,index) in goods" :key="index">
				<td>{{index+1}}</td>
				<td>{{val.title}}</td>
				<td>{{val.price}}</td>
				<td>{{val.chooseNum}}</td>
				<td>{{val.allPrice}}</td>
				<td>
					<button @[but.eventname]="handleClick" :class="but.className" v-for="but in val.objConfig">{{but.text}}</button>
				</td>
			</tr>
		</table>
		
		<!-- <div class="pop_box">
			<div class="content_box">
				<div class="close_box">X</div>
				<div class="tip_info">Lorem ipsum dolor sit amet.</div>
				<div class="but_box">
					<button>确认</button>
					<button>取消</button>
				</div>
			</div>
		</div> -->
		<pop-center></pop-center>
	</div>
</body>
</html>
<script>
	const app = Vue.createApp({
		data() {
			const objConfig = [
				{
					text:'减少',
					className:{'but_warn':true},
					event:'click'
				},
				{
					text:'增加',
					className:{'but_ok':true},
					event:'click'
				},
				{
					text:'删除',
					className:{'but_not':true},
					event:'dbclick'
				},
				{
					text:'修改',
					className:{'but_warn':true},
					event:'click'
				},
			];
			return{
				goods:[
					{
						title:'茉莉花茶',
						price:30,
						chooseNum:0,
						allPrice:0,
						objConfig
					},
					{
						title:'毛峰',
						price:30,
						chooseNum:0,
						allPrice:0,
						objConfig
					},{
						title:'普洱',
						price:30,
						chooseNum:0,
						allPrice:0,
						objConfig
					}
				],
				popConfig:{
					text:'',
					buts:[
						{
							text:'确认',
							className:{'but_not':true},
							eventname:'click'
						},
						{
							text:'取消',
							className:{'but_not':true},
							eventname:'click'
						},
					]
				},
				// 控制弹窗是否显示
				isShow:true
			}
		},
		methods:{
			handleClick(){
				alert(123);
			}
		}
	})
	app.component('pop-center',{
		props: ['popConfig'],
		template:
			`
				<div class="pop_box">
					<div class="content_box">
						<div class="close_box">X</div>
						<div class="tip_info">Lorem ipsum dolor sit amet.</div>
						<div class="but_box">
							<button @[but.eventname]="handleClick" :class="but.className" v-for="but in popConfig.buts">确认</button>
							<button>取消</button>
						</div>
					</div>
				</div>
			`
	})
	
	const vm = app.mount("#app");
</script>